<template>
  <div class="userAnalysis">
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="searchBox">
        <div>
          <h3>渠道增长</h3>
        </div>
        <div>
          <el-date-picker
            v-model="channelTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="channelPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartChannelGrowthBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcel"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="cn_name" label="渠道"> </el-table-column>
        <el-table-column prop="add" label="新增"> </el-table-column>
        <el-table-column prop="userTotal" label="用户总计"> </el-table-column>
        <el-table-column prop="rate" label="占比"> </el-table-column>
        <el-table-column prop="weekRate" label="周环比"> </el-table-column>
        <el-table-column prop="activeUser" label="活跃用户"> </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />

      <div id="myChartA" :style="{ width: '100%', height: '500px' }"></div>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { channelAddList } from "@/api/DataAnalysis";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      //渠道增长
      channelPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      channelTimeValStartDate: "",
      channelTimeValEndDate: "",
      channelTimeVal: [], //渠道增长时间

      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    //渠道增长列表
    chartChannelGrowth() {
      channelAddList({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.channelTimeValStartDate,
        endTime: this.channelTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          // 基于准备好的dom，初始化echarts实例
          let myChartA = this.$echarts.init(
            document.getElementById("myChartA")
          );
          // 绘制图表
          myChartA.setOption({
            color: ["#59b2ef", "#2ac8ca", "#ffba81"],
            title: {
              text: "渠道新增用户性别分布",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["女", "男", "其他"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: res.data.name,
            },
            yAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            series: [
              {
                name: "女",
                type: "bar",
                data: res.data.woman,
              },
              {
                name: "男",
                type: "bar",
                data: res.data.man,
              },
              {
                name: "其他",
                type: "bar",
                data: res.data.other,
              },
            ],
          });
        }
      });
    },
    //查询搜索
    chartChannelGrowthBtn() {
      this.page = 1;
      this.chartChannelGrowth();
    },
    //分页
    getList() {},

    //时间渠道增长
    focus(time) {
      if (!this.channelTimeVal) {
        this.channelTimeVal = [];
      }
      this.channelTimeValStartDate = this.channelTimeVal[0];
      this.channelTimeValEndDate = this.channelTimeVal[1];
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "渠道",
          "新增",
          "用户总计",
          "占比",
          "周环比",
          "活跃用户",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "cn_name",
          "add",
          "userTotal",
          "rate",
          "weekRate",
          "activeUser",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = this.tableData; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "渠道增长"); //最后一个是表名字
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    /**
     * 设置默认时间
     */
    getTimeFn() {
      const that = this;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
      that.channelTimeVal[0] = that.formatDate(start);
      that.channelTimeVal[1] = that.formatDate(end);
      that.channelTimeValStartDate = that.channelTimeVal[0];
      that.channelTimeValEndDate = that.channelTimeVal[1];
    },
    /**
     * 格式化时间
     */
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },
  },
  created() {
    this.getTimeFn();
    this.chartChannelGrowth();
  },
};
</script>

<style lang="less" scoped>
.userAnalysis {
  margin: 30px;
  height: 100%;
  .userStatisticsBox {
    margin-bottom: 30px;
    h3 {
      font-size: 22px;
    }
    .searchBox {
      display: flex;
      justify-content: space-between;
    }
    .el-table {
      margin-bottom: 100px;
      margin-top: 20px;
    }
  }
}
</style>